Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved left side panel CSS styling #167

Merged
merged 1 commit into from
Nov 14, 2023
Merged

Conversation

nadijagraca
Copy link
Contributor

Description

Improved left side panel CSS styling.

  • Increased the gap between nav_panel and controls_panel
  • Replaced html.Hr() dividers with css

Screenshot

Screenshot 2023-11-13 at 13 32 18

Checklist

  • I have not referenced individuals, products or companies in any commits, directly or indirectly
  • I have not added data or restricted code in any commits, directly or indirectly
  • I have updated the docstring of any public function/class/model changed
  • I have added tests to cover my changes (if applicable)

Types of changes

  • Docs/refactoring (non-breaking change which improves codebase)
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)

Notice

  • I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

    • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
    • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
    • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.

Copy link
Contributor

@antonymilne antonymilne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great, thank you! Should we do the same to the Hr in the accordion?

@antonymilne
Copy link
Contributor

antonymilne commented Nov 13, 2023

You didn't change it in this PR, but I just noticed: should the text in navigation and filters be aligned? It looks a bit weird to me right now with the navigation text being a bit indented. I'm not sure what the designs show here?

image

Copy link
Contributor

@petar-qb petar-qb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the changes.
P.S. If some visuals are changed, it's always nice to set and before and after screenshots in the PR Description 😄.

@nadijagraca
Copy link
Contributor Author

Thanks for the quick review. @antonymilne
I've replaced the Hr in the accordion as well.
As for the design, I have the latest from this link: Figma
And, as you noticed, navigation text is not aligned with the filters text, but the spacings are correct from the figma design. The misalignment is probably because we don't have a complete dashboard example with accordion navigation (only with dropdown).
Joe mentioned that we will do another round of css refinement after we add icons and tabs.

@nadijagraca nadijagraca force-pushed the bugfix/css/nav_panel_keyline branch from 07518f2 to 765bce1 Compare November 14, 2023 12:11
@nadijagraca nadijagraca merged commit c4c754b into main Nov 14, 2023
25 checks passed
@nadijagraca nadijagraca deleted the bugfix/css/nav_panel_keyline branch November 14, 2023 12:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants